import 'dart:async';
import 'dart:html';
import 'dart:typed_data';
import 'dart:ui';
import 'dart:ui' as ui;

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

/// 创建人： Created by zhaolong
/// 创建时间：Created by  on 2020/9/25.
///
/// 创建人： Created by zhaolong
/// 创建时间：Created by  on 2020/9/25.
///
/// gongzhonghao biglead
/// github https://github.com/zhaolongs
/// bili https://space.bilibili.com/513480210
/// zhihu https://www.zhihu.com/people/zhao-long-90-89
/// csdn https://blog.csdn.net/zl18603543572
/// 西瓜视频 https://www.ixigua.com/home/3662978423
///
///

void main() {
  ///启动根目录
  runApp(MaterialApp(
    home: Example812(),
  ));
}

//在widget中显示
class Example812 extends StatefulWidget {
  @override
  UIImageState createState() => UIImageState();
}

/// 代码清单 8-11-1 加载图片
/// lib/code8/example_812_Image.dart
class UIImageState extends State<Example812> {
  @override
  void initState() {
    super.initState();
    //加载本地资源目录图片
    _getAssetImage();
  }

  //获取本地图片
  Future<ui.Image>? _getAssetImage() async {
    ui.Image imageFrame = await getAssetImage(
      'assets/images/loginbg.png',
      width: 200,
      height: 200,
    );
    return imageFrame;
  }

  //获取资源目录图片 返回ui.Image
  Future<ui.Image> getAssetImage(String asset, {width, height}) async {
    ByteData data = await rootBundle.load(asset);
    ui.Codec codec = await ui.instantiateImageCodec(
      data.buffer.asUint8List(),
      targetWidth: width,
      targetHeight: height,
    );
    ui.FrameInfo fi = await codec.getNextFrame();
    return fi.image;
  }

  /// 代码清单 8-11-2 显示图片
  /// lib/code8/example_812_Image.dart
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: buildFutureBuilder(),
      ),
    );
  }

  Widget buildFutureBuilder() {
    return FutureBuilder<ui.Image>(
      future: _getAssetImage(),
      builder: (context, snapshot) {
        if (snapshot.data == null) {
          //未加载完成时显示一个加载进度
          return const CircularProgressIndicator();
        } else {
          //加载完成后
          ui.Image? image = snapshot.data;
          //绘制图片显示
          return CustomPaint(
            foregroundPainter: ImagePainter(image!),
            //画在child前面
            child: Container(
              width: double.infinity,
              height: 300,
              color: const Color.fromRGBO(155, 155, 155, 1),
            ),
          );
        }
      },
    );
  }
}

//获取网络图片
Future<ui.Image>? _getNetImage() async {
  ui.Image uiImage = await getNetImage('图片地址', width: 200);
  return uiImage;
}

//方获取网络图片 返回ui.Image
Future<ui.Image> getNetImage(String url, {width, height}) async {
  ByteData data = await NetworkAssetBundle(Uri.parse(url)).load(url);
  ui.Codec codec = await ui.instantiateImageCodec(
    data.buffer.asUint8List(),
    targetWidth: width,
    targetHeight: height,
  );
  ui.FrameInfo fi = await codec.getNextFrame();
  return fi.image;
}




//方法2.1：获取本地图片  返回ui.Image 需要传入BuildContext context
Future<ui.Image> getAssetImage2(String asset, BuildContext context,
    {width, height}) async {
  ByteData data = await DefaultAssetBundle.of(context).load(asset);
  ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
      targetWidth: width, targetHeight: height);
  ui.FrameInfo fi = await codec.getNextFrame();
  return fi.image;
}

/// 代码清单 8-11 绘制图片
/// lib/code8/example_812_Image.dart
class ImagePainter extends CustomPainter {
  final ui.Image _image;

  ImagePainter(this._image) : super();

  //定义画笔
  final Paint _paint = Paint()
    ..color = Colors.blue
    ..style = PaintingStyle.fill
    ..isAntiAlias = true
    ..strokeCap = StrokeCap.butt
    ..strokeWidth = 30.0;

  @override
  void paint(Canvas canvas, Size size) {
    //绘制图片
    canvas.drawImage(_image, const Offset(0, 0), _paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}
